<script setup lang="ts">
  import { ElMenu, ElMenuItem } from 'element-plus';
  import '@/views/DigitalTwin/css/left.css';

  /*
const isCollapse = ref(false);

// 注入共享状态
const topLabels = inject<{ label: string; subItems: any[] }[]>('topLabels')!;
const selectedTopLabelIndex = inject<Ref<number>>('selectedTopLabelIndex')!;

// 当前选中的子菜单项索引
const selectedSubItemIndex = ref(0);

// 根据选中顶部标签计算要显示的子菜单项
const currentSubItems = computed(() => {
return topLabels[selectedTopLabelIndex.value].subItems;
});

// 选择子菜单项的方法
const selectSubItem = (index: number) => {
selectedSubItemIndex.value = index;
};
*/
  defineProps<{
    subItems: any[];
    selectedSubItemIndex: number;
  }>();

  defineEmits<{
    (e: 'update:selected-sub-item-index', index: number): void;
  }>();
</script>

<template>
  <div class="left-menu">
    <!-- 左侧导航栏 -->
    <el-menu
      :default-active="String(selectedSubItemIndex)"
      background-color="#161f2c"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
      :collapse="false"
    >
      <el-menu-item
        v-for="(item, index) in subItems"
        :key="index"
        :index="String(index)"
        @click="$emit('update:selected-sub-item-index', index)"
      >
        <span class="menu-item-text">{{ item.label }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
  div {
    height: 95vh;
    background: #161f2c;
  }
  .left-menu {
    margin-top: 5vh;
  }
  .sidebar {
    width: 4vw;
    background-color: #161f2c;
    transition: width 0.3s;
  }
</style>
